<template>
  <div class="forgetpwd">
    <van-nav-bar
      left-arrow
      title="重置密码"
      @click-left="handleBackToLogin"
    ></van-nav-bar>
    <div class="container">
      <div class="input-container">
        <input
          type="text"
          placeholder="请输入账号"
          v-model="Form.username"
        />
      </div>
      <div class="input-container">
        <input
          type="password"
          placeholder="请输入旧密码"
          v-model="Form.old_password"
        />
      </div>
      <div class="input-container">
        <input
          type="password"
          placeholder="请输入新密码"
          v-model="Form.new_password"
        />
      </div>
      <div
        class="login btn_class"
        @click="handleReset"
        :class="{ active: isBtnActive }"
      >
        确认重置密码
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { forget } from "@/api/api";
import activeMixin from 'util/mixins/activeMixin'
export default {
  name: "UserForgetpwd",
  mixins: [activeMixin],
  data() {
    return {
      Form: {
        username: "",
        old_password: "",
        new_password: ""
      }
    }
  },
  methods: {
    handleBackToLogin(){
      this.$emit('update:loginOrRegister', 'login');
    },
    handleReset() {
      if (this.isBtnActive) {
        forget(this.Form).then(res => {
          console.log(res);
        }).catch(err => {
          console.log(err);
        });
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
a
  color #A9A9A9

.forgetpwd
  width 90%
  margin 0 auto
  background #ffffff
  .van-nav-bar__left .van-nav-bar__arrow
    color #4a4f54
    font-size 20px
  .container
    height 100%
    width 100%
    overflow hidden
    margin-top 30px

    .input-container
      margin-bottom 15px
      position: relative

      .get-code
        position absolute
        right 0
        top 4px
        background none
        font-size 16px
        padding-left 10px
        color #757575

    .quick-login
      margin-top 20px
      overflow hidden
      width 100%
      font-size 14px

      .forget-psd
        float right

    .btn_class
      width 100%
      border-radius 25px
      height 40px
      line-height 40px
      font-size 16px
      text-align center

    .login
      color #ffffff
      background-image linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)
      margin-bottom 15px

    .register
      color #f10000
      background-color #ffffff
      border 1px solid #f10000
      box-sizing border-box

    .input-container
      height 40px
      border-bottom 1px solid #efefef

      &:nth-child(1), &:nth-child(2)
        margin-bottom 20px

    .input-container input[type="text"]
      width 100%
      font-size 15px
      color #222222

    .input-container input[type="tel"]
      width 100%
      font-size 15px
      color #222222

    .input-container input[type="password"]
      width 100%
      font-size 15px
      color #222222
</style>
